<template>
	<view class="my_page">
		<image src="@/static/xinjiang/my_bg.png" mode="aspectFill" class="my_bg"></image>
		<view class="my_page__content">
			<view class="status_bar"></view>
			<view class="my_setting" @click="jumpTo('/pages/my/setting/setting')">
				<image src="@/static/xinjiang/my_setting.png" mode="aspectFit" class="my_setting__icon"></image>
			</view>
			<view class="my_user">
				<view class="my_user__avatar" @click="toLogin()">
					<image class="my_avatar" :src="userinfo.avatar" mode="aspectFit" v-if="userinfo.avatar"></image>
					<image class="my_avatar" src="@/static/default_avatar.png" mode="aspectFit" v-else></image>
					<image class="my_vip__icon" src="@/static/xinjiang/my_vip.png" mode="aspectFit"
						v-show="userinfo.is_vip"></image>
				</view>
				<view class="my_user__right">
					<view class="my_username">{{ (userinfo.nickname || userinfo.username) || '未登录' }}</view>
					<view class="my_user__level">用户等级: {{ userinfo.is_vip ? '会员' : '普通用户' }}</view>
				</view>
			</view>

			<view class="my_data">
				<view class="my_data__item">
					<view class="my_data__value">{{ userinfo.amount }}</view>
					<view class="my_data__label">账户余额</view>
				</view>
				<view class="my_data__item">
					<view class="my_data__value">{{ userinfo.give_sum || 0 }}</view>
					<view class="my_data__label">收益</view>
				</view>
				<view class="my_data__item" @click="jumpTo('/pages/movie/watchHistory/watchHistory')">
					<view class="my_data__value">{{ userinfo.movie_history_num || 0 }}</view>
					<view class="my_data__label">观看记录</view>
				</view>
				<view class="my_data__item" @click="jumpTo('/pages/movie/myFavorite/myFavorite')">
					<view class="my_data__value">{{ userinfo.collect_num || 0 }}</view>
					<view class="my_data__label">我的收藏</view>
				</view>
			</view>

			<view class="my_open__vip" @click="jumpTo('/pages/my/openVip/openVip')">
				<view class="my_vip__left">
					<image src="@/static/xinjiang/my_video.png" mode="aspectFit" class="my_vip__video"></image>
					<text class="my_vip__text">开通VIP，专享定制匹配</text>
				</view>
				<image src="@/static/xinjiang/my_arrow.png" mode="aspectFit" class="my_vip__arrow"></image>
			</view>

			<view class="my_menu__box my_30">
				<view class="my_menu__title">常用功能</view>

				<view class="my_menu__row mb_30">
					<view class="my_menu__item" @click="_activation">
						<image src="@/static/xinjiang/my_icon1.png" mode="aspectFit" class="my_menu__icon"></image>
						<view class="my_menu__text">卡密激活</view>
					</view>
					<view class="my_menu__item" @click="jumpTo('/pages/my/CardRedeemDiamond/CardRedeemDiamond')">
						<image src="@/static/xinjiang/my_icon2.png" mode="aspectFit" class="my_menu__icon"></image>
						<view class="my_menu__text">卡密冲钻</view>
					</view>
					<view class="my_menu__item" @click="jumpTo('/pages/my/DiamondRecharge/DiamondRecharge')">
						<image src="@/static/xinjiang/my_icon3.png" mode="aspectFit" class="my_menu__icon"></image>
						<view class="my_menu__text">钻石充值</view>
					</view>
					<view class="my_menu__item" @click="jumpTo('/pages/my/GoldToAmount/GoldToAmount')">
						<image src="@/static/xinjiang/my_icon4.png" mode="aspectFit" class="my_menu__icon"></image>
						<view class="my_menu__text">兑换钻石</view>
					</view>
				</view>

				<view class="my_menu__row">
					<view class="my_menu__item" @click="jumpTo('/pages/upload-video/upload-video')">
						<image src="@/static/xinjiang/my_icon5.png" mode="aspectFit" class="my_menu__icon"></image>
						<view class="my_menu__text">发布视频</view>
					</view>
					<view class="my_menu__item" @click="jumpTo('/pages/my/myVideo/myVideo')">
						<image src="@/static/xinjiang/my_icon6.png" mode="aspectFit" class="my_menu__icon"></image>
						<view class="my_menu__text">我的视频</view>
					</view>
					<view class="my_menu__item" @tap="_toInvitePage">
						<image src="@/static/xinjiang/my_icon7.png" mode="aspectFit" class="my_menu__icon"></image>
						<view class="my_menu__text">推广中心</view>
					</view>
					<view class="my_menu__item" @click="jumpTo('/pages/my/withdrawal/withdrawal')">
						<image src="@/static/xinjiang/my_icon8.png" mode="aspectFit" class="my_menu__icon"></image>
						<view class="my_menu__text">申请提现</view>
					</view>
				</view>
			</view>

			<view class="my_menu__box my_30">
				<view class="my_menu__title">其他设置</view>

				<view class="my_menu__row">
					<view class="my_menu__item" @click="jumpTo('/pages/movie/myFollows/myFollows')">
						<image src="@/static/xinjiang/my_setting1.png" mode="aspectFit" class="my_menu__icon"></image>
						<view class="my_menu__text">我的关注</view>
					</view>
					<view class="my_menu__item"
						@click="jumpTo('/pages/my/DiamondTransactionRecords/DiamondTransactionRecords')">
						<image src="@/static/xinjiang/my_setting2.png" mode="aspectFit" class="my_menu__icon"></image>
						<view class="my_menu__text">钻石明细</view>
					</view>
					<view class="my_menu__item">
						<image src="@/static/xinjiang/my_setting3.png" mode="aspectFit" class="my_menu__icon"></image>
						<view class="my_menu__text">收益明细</view>
					</view>
					<view class="my_menu__item" @click="jumpTo('/pages/my/TipRecords/TipRecords')">
						<image src="@/static/xinjiang/my_setting4.png" mode="aspectFit" class="my_menu__icon"></image>
						<view class="my_menu__text">打赏记录</view>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 50rpx;"></view>
		<view class="my_tabbar">
			<v-tabbar></v-tabbar>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'

	export default {
		data() {
			return {}
		},
		computed: {
			...mapState(['userinfo', 'token'])
		},
		methods: {
			jumpTo(url) {
				uni.navigateTo({
					url
				})
			},
			toLogin() {
				if (this.token) {
					this.jumpTo('/pages/register/edit?is_edit=true')
					return false
				}
				this.jumpTo('/pages/login/login')
			},
			_toInvitePage() {
				uni.navigateTo({
					url: '/pages/my/invite/invite'
				})
			},
			_activation() {
				uni.navigateTo({
					url: '/pages/my/cardPIN/cardPIN'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import url("my.scss");
</style>